<template>
    <div>
        <h1>显示界面</h1>
        <a href="/Add">新增</a>
        户型名称
        <input type="text" v-model="page.houseName">
        户型结构
        <select v-model="page.houseTypes">
            <option value="0">==请选择==</option>
            <option>三室两厅</option>
            <option>两室一厅</option>
            <option>两室两厅</option>
        </select>
        <input type="button" value="查询" @click="Show">
        <table class="table">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>户型名称</td>
                    <td>户型结构</td>
                    <td>装修标准</td>
                    <td>建筑面积</td>
                    <td>套内面积</td>
                    <td>户型图</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data">
                    <td>{{a.id}}</td>
                    <td>{{a.houseName}}</td>
                    <td>{{a.houseTypes}}</td>
                    <td>{{a.houseBz}}</td>
                    <td>{{a.jianZ}}</td>
                    <td>{{a.taoN}}</td>
                    <td> <img :src="'https://localhost:7288'+a.img" width="90px" height="90px"></td>
                    <td>
                        <input type="button" value="删除" @click="Delete(a.id)">
                        <input type="button" value="修改" @click="Find(a.id)">
                        <a :href="'https://localhost:7288'+a.img" target="_blank">点击查看图片</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="FenY(1)">
        <input type="button" value="上一页" @click="FenY(2)">
        <input type="button" value="下一页" @click="FenY(3)">
        <input type="button" value="尾页" @click="FenY(4)">
    </div>
</template>

<script setup lang="ts">

import axios from 'axios';
import { ref } from 'vue';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router=useRouter();

onMounted(()=>{
    Show();
})

const data=ref([{
    "id": 0,
      "houseName": "",
      "houseTypes": "",
      "houseBz": "",
      "jianZ": 0,
      "taoN": 0,
      "img": "",
      "isdig": false
}])

const page=ref({
    houseName:"",
    houseTypes:0,
    index:1,
    size:3,
})

const pagecount=ref({
    count:0,
    pcount:0,
})

const FenY=(s:any)=>{
    if(s==1){
        page.value.index=1;
        Show();
    }
    if(s==2){
        if(page.value.index>=1){
            page.value.index-=1;
            Show();
        }
    }
    if(s==3){
        if(page.value.index<pagecount.value.pcount){
            page.value.index+=1;
            Show();
        }
    }
    if(s==4){
        page.value.index=pagecount.value.pcount;
        Show();
    }
}

//显示
const Show=()=>{
    axios.get("https://localhost:7288/api/House/GetAll",{params:page.value}).then(res=>{
        data.value=res.data.data;
        pagecount.value.count=res.data.count;
        pagecount.value.pcount=Math.ceil(res.data.count/page.value.size);
    })
}

//删除
const Delete=(vid:any)=>{
    if(confirm("确认要删除吗")){
        return;
    }
    axios.delete("https://localhost:7288/api/House/DeletType",{params:{id:vid}}).then(res=>{
        if(res.data>0){
            alert('删除成功');
            Show();
        }else{
            alert('删除失败');
        }
    })
}

const Find=(vid:any)=>{
    router.push({path:'/Find',query:{id:vid}});
}

</script>

<style scoped>

</style>